@import '/src/theme/mixins/amixin';
.recent-posts {
  .block-title {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-transform: uppercase;
    word-spacing: 1px;
  }
  .list {
    list-style: none;
    margin: 0;
    padding: 0;
    .item {
      list-style-type: none;
      clear: both;
      min-height: 60px;
      margin-bottom: 29px;
      .post-img {
        float: left;
        margin-right: 18px;
        display: block;
        overflow: hidden;
        position: relative;
        &:before {
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          @include transition(all, 200ms, ease-in-out);
          @include border-radius(3px, 3px, 3px, 3px);
        }
        .mat-icon {
          font-size: 20px;
          opacity: 0;
          @include middle-center();
          @include transition(all, 200ms, ease-in-out);
        }
        &:hover:before,
        &:hover .mat-icon {
          cursor: pointer;
          opacity: 1;
        }
        ::ng-deep img {
          width: 90px;
          height: 60px;
          @include border-radius(3px, 3px, 3px, 3px);
        }
      }
      .blog-title ::ng-deep a {
        display: block;
        font-size: 13px;
        margin-bottom: 7px;
        margin-top: -3px;
        margin-left: 108px;
      }
      .blog-date,
      .blog-categories {
        margin-bottom: 5px;
        display: block;
        font-size: 12px;
        font-style: italic;
        margin-left: 108px;
      }
      &.no-img {
        .blog-title ::ng-deep a,
        .blog-date {
          margin-left: 0;
        }
      }
    }
  }
}
